<!DOCTYPE html>
<html lang="en-us">

<head>
    <title>民生免费券</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" href="favicon.ico" />
    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <link href="css/font-awesome.min.css" rel="stylesheet" />
    <link href="css/default.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery.min.js"></script>
    <!-- table导出成csv -->
    <script src="js/table2excel.js"></script>
    <script src="js/bootstrap/bootstrap.min.js"></script>
    <script src="js/bootstrap/bootstrap-table.min.js"></script>
    <script src="js/bootstrap/bootstrap-table-zh-CN.min.js"></script>
    <!--[if lt IE 9]>
    <script src="js/bootstrap/html5shiv.min.js"></script>
    <script src="js/bootstrap/respond.min.js"></script>
    <![endif]-->
    <!--页面加载进度条-->
    <link href="css/pace/dataurl.css" rel="stylesheet" />
    <script src="js/pace/pace.min.js"></script>
    <script src="js/jquery.scrolltopcontrol/scrolltopcontrol.js" type="text/javascript"></script>
    <script src="js/jquery.extend.js" type="text/javascript"></script>
    <script src="js/default.js" type="text/javascript"></script>
    <script src="js/jqueryrotate.js" type="text/javascript"></script>
    <!-- 下拉菜单 -->
    <link href="./css/bootstrap-select/bootstrap-select.min.css" rel="stylesheet" />
    <script src="./js/bootstrap-select/bootstrap-select.min.js"></script>
    <script src="./js/bootstrap-select/i18n/defaults-zh_CN.min.js"></script>
    <script src="./js/bootstrap-select/bootstrap-select-custom.js"></script>
    <!-- 省市区 -->
    <script type="text/javascript" src="./js/cj-pcd/cj-pcd-1.0.1.min.js"></script>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
        }

        .fixed-table-header {
            display: none !important;
        }

        #id-card-photo-wrapper {
            display: none;
            width: 720px;
            height: 480px;
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        #id-card-photo-wrapper #ic-rotate {
            position: absolute;
            right: 0;
            top: 0;
            width: 33px;
            height: 33px;
            line-height: 33px;
            text-align: center;
            background: #fff;
            cursor: pointer;
            box-shadow: 2px 2px 2px #eee, -2px -2px 2px #eee;
        }

        #id-card-photo {
            background: #fff;
            padding: 10px;
            display: block;
            width: 100%;
            height: 100%;
            box-shadow: 2px 2px 5px #ddd, -2px -2px 5px #ddd;
        }

        .bootstrap-table {
            padding: 10px 16px;
        }

        .agree-item {
            color: #a94442;
        }

        .params-warpper {
            display: flex;
            flex-direction: row;
            padding-right: 200px;
        }

        #search-btn {
            position: absolute;
            right: 50px;
            top: 50%;
            transform: translateY(-50%);
            width: 100px;
        }

        .params-warpper .params-item {
            flex: 1;
            display: flex;
            flex-direction: row;
            margin-top: 10px;
        }

        .params-warpper .params-item label {
            display: inline-block;
            min-width: 120px;
            line-height: 34px;
            text-align: right;
            letter-spacing: 2px;
        }

        .params-warpper .params-item .value {
            flex: 1;
        }

        .maincontent {
            min-width: 1000px !important;
            overflow: hidden !important;
            overflow-x: scroll !important;
        }
        .zhezhao{
            position: fixed;
            left:0;
            top:0;
            bottom:0;
            right:0;
            background:#000;
            opacity:0.5;
            display: none;
        }
        .importDiv{
            width: 900px;
            height: 500px;
            border: 1px solid #ddd;
            border-radius: 5px;
            position:fixed;
            left:50%;top:50%;
            transform:translate(-50%,-50%);
            background: #fff;
            display: none;
        }
        .importDiv div{
            float: left;
            margin: 15px 0 0 20px;
        }
        .importDiv div input,select{
            border: 1px solid #ddd;
            border-radius: 3px;
            width: 180px;
            height: 30px;
        }
        .postData{
            width: 600px;
            height: 400px;
            border: 1px solid #ddd;
            border-radius: 5px;
            position:fixed;
            left:50%;top:50%;
            transform:translate(-50%,-50%);
            background: #fff;
            display: none;
        }
        .postData div span,input{
            display: inline-block !important;
        }
        .postData div,p{
            margin: 15px 0 0 30px;
        }
        .row{
            width: 100%;
            /*display: flex !important;*/
        }
        .row div{
            float: none;
            margin: 0;
        }
        .row .col-md-3{
            /*flex: 1 !important;*/
            float: left;
        }
        .pageIndexDiv button{
            border: 1px solid #ddd;
            border-radius: 3px;
            margin-right: 20px;
            background: #337ab7;
            color: #fff;
            height: 30px;
        }
    </style>
</head>

<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle show pull-left" data-target="sidebar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false"
                    aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="index.html">首页</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
            <ul class="nav navbar-nav navbar-right">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
                        <i class="fa fa-user fa-fw"></i>
                        <span class="username"></span>
                        <span class="caret"></span>
                    </a>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                        <a class="dropdown-item" href="javascript:logout();">退出登录</a>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</nav>
<div class="container-fluid all">
    <div class="sidebar">
        <ul class="nav">
            <li>
                <a href="index.html">首页</a>
            </li>
            <li class="has-sub">
                <a href="coupon-review.html">
                    <span>民生免费券</span>
                    <i class="fa fa-caret-right fa-fw pull-right"></i>
                </a>
            </li>
            <li class="has-sub">
                <a href="add-sample/sample-list.jsp">
                    <span>送检单</span>
                    <i class="fa fa-caret-right fa-fw pull-right"></i>
                </a>
            </li>
        </ul>
    </div>
    <div class="maincontent">
        <!--我是主要内容-->
        <div class="panel panel-default">
            <div class="panel-heading">
                查询条件
            </div>
            <div class="panel-body form-group" style="margin-bottom:0px; position:relative;">
                <div class="params-warpper">
                    <div class="params-item">
                    </div>
                    <div class="params-item">
                        <label class="control-label">手机号码：</label>
                        <input type="text" class="form-control value" id="search-phone" />
                    </div>
                    <div class="params-item">
                    </div>
                </div>
                <button class="btn btn-primary" id="search-btn">查询</button>
            </div>
        </div>
        <div id="toolbar" class="btn-group" style="margin-left: 20px;">
            <button id="btn_edit" type="button" class="btn btn-default" style="display: none; border-radius: 0">
                <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
            </button>
            <button id="btn_delete" type="button" class="btn btn-default" style="display: none;">
                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
            </button>
            <button id="btn_add" type="button" class="btn btn-primary">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>添加建册
            </button>
            <a href="javascript:postData();" class="btn btn-default" style="margin-left: 10px">批量导入</a>
        </div>
        <table id="mytab" class="table table-hover">
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>手机号码</th>
                    <th>身份证号</th>
                    <th>末次月经</th>
                    <th>预产期</th>
                    <th>填表孕周</th>
                    <th>户口类型</th>
                    <th>丈夫姓名</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
</div>
<a href="#top" id="goTop">
    <i class="fa fa-angle-up fa-3x"></i>
</a>
<div id="id-card-photo-wrapper">
    <img alt='' id="id-card-photo" />
    <span class="glyphicon glyphicon-repeat" aria-hidden="true" id="ic-rotate"></span>
</div>
<div class="zhezhao"></div>
<div class="importDiv">
    <h2 style="font-size: 20px;text-align: center">录入信息</h2>
    <div class="row">
        <div class="col-md-3">
            <div class="form-inline">
                <label style="display:inline-block;">省</label>
                <div style="display:inline-block;">
                    <select id="province" onchange="addressChange('#province')" class="selectpicker form-control" data-live-search="true" data-max-options="1">
                        <option value="">请选择</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="form-inline">
                <label style="display:inline-block;">市</label>
                <div style="display:inline-block;">
                    <select id="city" onchange="addressChange('#city')" class="selectpicker form-control" data-live-search="true" data-max-options="1">
                        <option value="">请选择</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="form-inline">
                <label style="display:inline-block;">区/县</label>
                <div style="display:inline-block;">
                    <select id="county" onchange="addressChange('#county')" class="selectpicker form-control" data-live-search="true" data-max-options="1">
                        <option value="">请选择</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="form-inline row">
                <label style="display:inline-block;">乡镇/街道</label>
                <div style="display:inline-block;">
                    <select id="town" onchange="addressChange('#town')" class="selectpicker form-control" data-live-search="true" data-max-options="1">
                        <option value="">请选择</option>
                    </select>
                </div>
            </div>
        </div>
    </div>
    <div>
        <span>居住地址：</span>
        <input type="text" class="residentialAddress" placeholder="请输入" />
    </div>
    <div>
        <span>　　姓名：</span>
        <input type="text" class="userName" placeholder="请输入" />
    </div>
    <div>
        <span>身份证号码：</span>
        <input type="text" class="idCard" placeholder="请输入" />
    </div>
    <div>
        <span>手机号码：</span>
        <input type="text" class="phoneNum" placeholder="请输入" />
    </div>
    <div>
        <span>末次月经：</span>
        <input type="date" class="lastMenstruation" />
    </div>
    <div>
        <span>　填表日期：</span>
        <input type="date" class="fillDate" />
    </div>
    <div>
        <span>填表孕周：</span>
        <input type="text" style="width: 75px" class="fillWeek" placeholder="请输入" />周<input type="text" style="width: 75px" class="fillDays" placeholder="请输入" />天
    </div>
    <div>
        <span>　预产期：</span>
        <input type="date" class="preDate" />
    </div>
    <div>
        <span>　是否结案：</span>
        <select name="" id="jiean" style="width: 180px">
            <option value="1">是</option>
            <option value="0">否</option>
        </select>
    </div>
    <div>
        <span>结案日期：</span>
        <input type="date" class="closeDate" />
    </div>
    <div>
        <span>户口类型：</span>
        <select name="" id="idType" style="width: 180px">
            <option value="1">常住</option>
            <option value="2">流动</option>
            <option value="3">暂住</option>
        </select>
    </div>
    <div>
        <span>　丈夫姓名：</span>
        <input type="text" class="husbandName" placeholder="请输入" />
    </div>
    <div>
        <span>产前检查预约日期：</span>
        <input type="date" class="antDate" />
    </div>
    <div>
        <span>末次检查日期：</span>
        <input type="date" class="lastDate" />
    </div>
    <div style="width: 100%;margin: 100px 0 0 0;text-align: center">
        <button class="doSubmit" style="width: 80px;height: 40px;background: #337ab7;color: #fff;border: 1px solid #337ab7;border-radius: 5px">提交</button>
        <button class="closeDiv" style="width: 80px;height: 40px;background: #337ab7;color: #fff;border: 1px solid #337ab7;border-radius: 5px;margin-left: 30px">关闭</button>
    </div>
</div>
<div class="postData">
    <h2 style="font-size: 20px;text-align: center">导入文件</h2>
    <div>
        <span>上传数据：</span>
        <input type="file" class="fileData" placeholder="上传文件" />
    </div>
    <p>支持扩展名：.EXCEL，CSV</p>
    <div style="width: 100%;margin: 150px 0 0 0;text-align: center">
        <button class="postSubmit" style="width: 80px;height: 40px;background: #337ab7;color: #fff;border: 1px solid #337ab7;border-radius: 5px">提交</button>
        <button class="closeDiv" style="width: 80px;height: 40px;background: #337ab7;color: #fff;border: 1px solid #337ab7;border-radius: 5px;margin-left: 30px">关闭</button>
    </div>
</div>

<script>
    $(document).ready(function () {
        resetSelect($('#province'), '', 10);
        getListInfo();
    })
    //省市区
    function resetSelect(jq, parentId, defaultIdx) {
        var url = '/csfy/intf.do?method=getAddrs';
        if (parentId) {
            url = url + '&parentId=' + parentId;
        }
        var jqId = '#' + jq.attr('id');
        $.getJSON(url, function (data) {
            if (data.msg === 'success') {
                jq.empty();
                $.each(data.rows, function (i, item) {
                    var option = $('<option></option>');
                    option.attr('value', item['code']);
                    option.text(item['name']);
                    jq.append(option);
                });
                if (defaultIdx) {
                    jq.get(0).selectedIndex = defaultIdx;
                }

                if (jqId) {
                    addressChange(jqId);
                }
                jq.selectpicker('refresh');
            }
        });
    }
    function addressChange(id) {
        var code = $(id).children('option:selected').attr('value')
        switch (id) {
            case '#province':
            {
                var defaultIdx = undefined;
                if (code == 43) {
                    defaultIdx = 8;
                }
                resetSelect($('#city'), code, defaultIdx);
                $('#county').empty();
                $('#town').empty();
                $('#county').selectpicker('refresh');
                $('#town').selectpicker('refresh');
                break;
            }
            case '#city':
            {
                resetSelect($('#county'), code);
                $('#town').empty();
                $('#town').selectpicker('refresh');
                break;
            }
            case '#county':
            {
                resetSelect($('#town'), code);
                break;
            }
            case '#town':
            {
                break;
            }
        }
    }
    //退出登录
    function logout() {
        $.ajax({
            url: '/csfy/dologout.do',
            method: 'POST',
            success: function (res) {
                if (JSON.parse(res).code == 200) {
                    window.location.href = "/csfy/index.do"
                }
            }
        })
    }
    //TODO 获取当前登录用户所在的省市区 start
    //设置街道
    function onSteetChange(parentId) {
        town = $("#steetSelect option[value='" + parentId + "']").text();
    }
    //设置地区
    function onCountryChange(parentId) {
        country = $("#countrySelect option[value='" + parentId + "']").text();
        $.ajax({
            method: 'POST',
            url: '/csfy/intf.do',
            data: {
                method: 'getAddrs',
                parentId,
            },
            success: (res) => {
                if (res.code == 200 && res.rows) {
                    var steetList = '';
                    town = '';
                    res.rows.map((item, index) => {
                        if (index == 0) {
                            town = item.name;
                        }
                        steetList += '<option value="' + item.code + '">' + item.name + '</option>'
                    })
                    $("#steetSelect").html(steetList);
                }
            }
        });
    }
    var pageIndex = 1;
    //上一页
    $(".beforePageIndex").click(function () {
        if(pageIndex > 1){
            pageIndex--;
            $(".pageIndex").val(pageIndex);
            getListInfo();
        }
    })
    //下一页
    $(".nextPageIndex").click(function () {
        pageIndex++;
        $(".pageIndex").val(pageIndex);
        getListInfo();
    })
    //分页跳转
    $(".goPageIndex").click(function () {
        pageIndex = $(".pageIndex").val();
        getListInfo();
    })
    //转换时间格式
    function timestampToTime(timestamp) {
        var date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
        var Y = date.getFullYear() + '-';
        var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
        var D = date.getDate() + ' ';
        return Y+M+D;
    }
    //获取列表信息
    function getListInfo() {
        var postData = {
            pageIndex:pageIndex
        }
        $.ajax({
            url: "/csfy/pw/find.do",
            type: "POST",
            data: JSON.stringify(postData),
            contentType: "application/json;charset=utf-8",
            timeout: 150000,
            success: function (data) {
                console.log(JSON.parse(data));
                var dataInfo = JSON.parse(data).rows;
                var creatDom = '';
                var registeredResidenceType = '';
                for(var i=0;i<dataInfo.length;i++){
                    if(dataInfo[i].registeredResidenceType == 1){
                        registeredResidenceType = "常住";
                    }else if(dataInfo[i].registeredResidenceType == 2){
                        registeredResidenceType = "流动";
                    }else if(dataInfo[i].registeredResidenceType == 3){
                        registeredResidenceType = "暂住";
                    }
                    creatDom += '<tr><td>' + dataInfo[i].pwName + '</td><td>' + dataInfo[i].contactNumber + '</td><td>' + dataInfo[i].idCard + '</td><td>' + timestampToTime(dataInfo[i].lastMenstruation) + '</td><td>' + timestampToTime(dataInfo[i].preProductionDate) + '</td><td>' + dataInfo[i].fillTableWeeks + '</td><td>' + registeredResidenceType + '</td><td>' + dataInfo[i].husbandsName + '</td></tr>'
                }
                $("#mytab tbody").html(creatDom);
            }
        })
    }
    //查询按钮事件
    $('#search-btn').click(function () {
        var pwName = $("#search-name").val() || '';
        var contactNumber = $("#search-phone").val() || '';
        var query = {};
        if (pwName != '') {
            query.pwName = pwName;
        }
        if (contactNumber != '') {
            query.contactNumber = contactNumber;
        }
        $.ajax({
            url: "/csfy/pw/find.do",
            type: "POST",
            data: JSON.stringify(query),
            contentType: "application/json;charset=utf-8",
            timeout: 150000,
            success: function (data) {
                var dataInfo = JSON.parse(data).rows;
                var creatDom = '';
                var registeredResidenceType = '';
                for(var i=0;i<dataInfo.length;i++){
                    if(dataInfo[i].registeredResidenceType == 1){
                        registeredResidenceType = "常住";
                    }else if(dataInfo[i].registeredResidenceType == 2){
                        registeredResidenceType = "流动";
                    }else if(dataInfo[i].registeredResidenceType == 3){
                        registeredResidenceType = "暂住";
                    }
                    creatDom += '<tr><td>' + dataInfo[i].pwName + '</td><td>' + dataInfo[i].contactNumber + '</td><td>' + dataInfo[i].idCard + '</td><td>' + timestampToTime(dataInfo[i].lastMenstruation) + '</td><td>' + timestampToTime(dataInfo[i].preProductionDate) + '</td><td>' + dataInfo[i].fillTableWeeks + '</td><td>' + registeredResidenceType + '</td><td>' + dataInfo[i].husbandsName + '</td></tr>'
                }
                $("#mytab tbody").html(creatDom);
            }
        })
    })
    //tableHeight函数
    function tableHeight() {
        //可以根据自己页面情况进行调整
        return $(window).height() - 280;
    }
    //身份证字母大写
    $('.idCard').change(function () {
        $('.idCard').val($('.idCard').val().toUpperCase());
    })
    //添加建册按钮
    $("#btn_add").click(function () {
        $(".zhezhao").show();
        $(".importDiv").show();
        $('.userName').val('');
        $('.idCard').val('');
        $('.phoneNum').val('');
        $('.lastMenstruation').val('');
        $('.residentialAddress').val('');
        $('.fillDate').val('');
        $('.fillWeek').val('');
        $('.fillDays').val('');
        $('.preDate').val('');
        $('.antDate').val('');
        $('.lastDate').val('');
        $('.closeDate').val('');
        $('.husbandName').val('');
    });
    //提交建册
    $(".doSubmit").click(function () {
        //验证身份证格式
        var pattern = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
        var mobNo = pattern.test($('.idCard').val());
        if(!mobNo){
            alert('请输入正确的身份证号码！');
            return false;
        }
        //验证手机号码格式
        var pattern2 = /^1[3456789]\d{9}$/;
        var mobNo2 = pattern2.test($('.phoneNum').val());
        if(!mobNo2){
            alert('请输入正确的手机号码！');
            return false;
        }
        var postData = {
            pwName:$('.userName').val(),
            idCard:$('.idCard').val(),
            contactNumber:$('.phoneNum').val(),
            lastMenstruation:$('.lastMenstruation').val(),
            province:$('#province option:selected').text(),
            city:$('#city option:selected').text(),
            area:$('#county option:selected').text(),
            street:$('#town option:selected').text(),
            residentialAddress:$('.residentialAddress').val(),
            fillTableDate:$('.fillDate').val(),
            fillTableWeeks:$('.fillWeek').val() + "周" + $('.fillDays').val() + "天",
            preProductionDate:$('.preDate').val(),
            antenatalCheckDate:$('.antDate').val(),
            lastCheckDate:$('.lastDate').val(),
            isClosed:$('#jiean option:selected').val(),
            closedDate:$('.closeDate').val(),
            registeredResidenceType:$('#idType option:selected').val(),
            husbandsName:$('.husbandName').val()
        }
        if(postData.name == ''){
            alert('请输入您的姓名！');
            return false;
        }
        if(postData.lastMenstruation == ''){
            alert('请输入末次月经日期！');
            return false;
        }
        if(postData.province == '请选择' || postData.city == '请选择' || postData.area == '请选择' || postData.street == '请选择'){
            alert('请选择省/市/区县/乡镇/街道！');
            return false;
        }
        if(postData.residentialAddress == ''){
            alert('请输入您的居住地址！');
            return false;
        }
        if(postData.fillTableDate == ''){
            alert('请输入填表日期！');
            return false;
        }
        if($('.fillWeek').val().length == 0 || $('.fillDays').val().length == 0){
            alert('请输入孕周/天数！');
            return false;
        }
        if(postData.preProductionDate == ''){
            alert('请输入预产期！');
            return false;
        }
        if(postData.antenatalCheckDate == ''){
            alert('请输入产前检查预约日期！');
            return false;
        }
        if(postData.lastCheckDate == ''){
            alert('请输入末次检查日期！');
            return false;
        }
        if(postData.closedDate == ''){
            alert('请输入结案日期！');
            return false;
        }
        if(postData.husbandsName == ''){
            alert('请输入丈夫姓名！');
            return false;
        }
        $.ajax({
            url: "/csfy/pw/create.do",
            type: "POST",
            data: JSON.stringify(postData),
            contentType: "application/json;charset=utf-8",
            timeout: 150000,
            success: function (data) {
                var rows = JSON.parse(data);
                if(rows.msg == 'success'){
                    $(".zhezhao").hide();
                    $(".importDiv").hide();
                }
            }
        })
    });
    //点击遮罩隐藏弹窗
    $(".zhezhao").click(function () {
        $(".zhezhao").hide();
        $(".importDiv").hide();
        $(".postData").hide();
        $(".fileData").val('');
    });
    //关闭按钮
    $(".closeDiv").click(function () {
        $(".zhezhao").hide();
        $(".importDiv").hide();
        $(".postData").hide();
        $(".fileData").val('');
    });
    //批量导入按钮
    function postData(){
        $(".zhezhao").show();
        $(".postData").show();
    }
    //批量导入提交
    $(".doSubmit").click(function () {

    });
</script>
</body>

</html>